<template>
  <li>
    <img :src="data.dogImgUrl" alt="">
    <div @click="change" :style="{backgroundColor:color[num]}">{{data.dogName}}</div>
  </li>
</template>

<script>
export default {
  data () {
    return {
      color: ['#fff', '#9f0', '#159', '#f11', '#1f1'],
      num: 0
    }
  },
  props: ['data'],
  created () {

  },

  methods: {
    change () {
      this.$emit('dogList', this.data.dogName)
      if (this.num === this.color.length - 1) {
        this.num = 0
        return
      }
      this.num++
    }
  }
}
</script>

<style scoped lang='less'>
  li{
    float: left;
    width: 200px;
    list-style: none;
    text-align: center;
    border: 1px solid #333;
    box-sizing: border-box;
    img {
      width: 100%;
      height: 200px;
    }
    div{
      margin: 10px 0;
      font-size: 12px;
    }
  }
</style>
